<!--
 * @Author: zheguo 3188606474@qq.com
 * @Date: 2024-04-16 20:17:11
 * @LastEditors: zheguo 3188606474@qq.com
 * @LastEditTime: 2024-04-23 21:37:37
 * @FilePath: \ProjectAction\projectOne\myapp\src\components\Shop_component\Swiper.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="Swiper_content">

    <div class="content_son">
      <div class="swiper_navbar">
        <ul>
          <li v-for="item in store.datalist" :key="item"><span>{{ item }}</span><i class="iconfont icon-qianjin"></i>
          </li>
        </ul>
      </div>

      <div class="block text-center" m="t-4">
        <el-carousel trigger="click" height="450px">
          <el-carousel-item v-for="item in store.swiperlist" :key="item.imgId">
            <img :src="item.dataimg" alt="" style="width: 100%;height: 100%;">
          </el-carousel-item>
        </el-carousel>
      </div>
      
    </div>

  </div>
</template>
<script setup>
import useSwiper from '../../store/Shop_store/Swiper'
import { onMounted, onBeforeMount } from 'vue'
const store = useSwiper()
onBeforeMount(() => {
  if (store.swiperlist.length === 0) {
    store.getSwiperList()
  }
})
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.Swiper_content {
  width: 100%;

  .content_son {
    margin: 0 auto;
    width: 1200px;
    display: flex;

    .swiper_navbar {
      width: 250px;
      height: 450px;
      background: rgb(150, 144, 139);

      ul {
        height: 450px;
        display: flex;
        flex-direction: column;
        list-style: none;

        li {
          width: 100%;
          flex: 1;
          line-height: 45px;
          cursor: pointer;

          span {
            margin-left: 40px;
            color: white;
          }

          i {
            color: white;
            float: right;
            font-weight: 600;
            margin-right: 20px;
          }
        }

        li:hover {
          background: #ff6a00;
        }
      }
    }

    .block {
      width: 950px;
    }
  }

}
</style>